<template>
  <div class="house_swipe">
    <div v-show="videoImg === 1" class="video">
      <!--<video width="100%" height="250" controls>-->
        <!--<source :src="videoUrl.file_url" type="video/mp4">-->
        <!--&lt;!&ndash;<source :src="videoUrl.file_url" type="video/ogg">&ndash;&gt;-->
        <!--您的浏览器不支持 HTML5 video 标签。-->
      <!--</video>-->
      <video-play-q-b :openButtonShow="openButtonShow" :closeButtonShow="closeButtonShow" :thumb_url="top_video_img.file_url" :videoUrl="videoUrl.file_url"></video-play-q-b>
    </div>
    <mt-swipe @change="handleChange" :show-indicators="false" v-show="videoImg === 2">
      <mt-swipe-item v-for="item in swipeContent" :key="item.id">
        <img  v-lazy.container="item.file_url" :alt="item.file_name">
      </mt-swipe-item>
    </mt-swipe>
    <div class="select_img_video" v-show="buttonShow">
      <div @click="changeVideo" :class="{red:videoImg === 1}">视频</div>
      <div @click="changeImg" :class="{red:videoImg === 2}">图片</div>
      <div v-show="videoImg === 2">{{index}} / {{imgNumber}}</div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import {Swipe, SwipeItem} from 'mint-ui';
  import VideoPlayQB from '../common/VideoPlayerQB'
  Vue.component(Swipe.name, Swipe);
  Vue.component(SwipeItem.name, SwipeItem);
  export default {
    props:{
      swipeContent:{
        type:Array
      },
      videoUrl:{
        type: Object
      },
      top_video_img:{
        type:Object
      }
    },
    name: 'HouseSwipe',
    data() {
      return {
        index: 1,
        videoImg: 2,
        buttonShow:true
      }
    },
    methods: {
      //显示按钮
      openButtonShow(){
        this.buttonShow = true;
      },
      // 隐藏按钮
      closeButtonShow(){
        this.buttonShow = false;
      },
      handleChange(index) {
        this.index = index + 1;
      },
      changeVideo() {
        this.videoImg = 1;
      },
      changeImg() {
        this.videoImg = 2;
      }
    },
    computed:{
      imgNumber:{
        get(){
          return this.swipeContent.length
        }
      }
    },
    components:{
      VideoPlayQB
    }

  }
</script>

<style scoped>
  .house_swipe {
    height: 210px;
    position: relative;
  }

  .house_swipe img{
    height: 100%;
    width: 100%;
  }
  .house_swipe .video{
    /*height: 10px;*/
    width: 100%;
  }
  .house_swipe .select_img_video {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
    bottom: 30px;
    width: 100%;
    font-size: 0.5rem !important;
    z-index: 999;
  }
  .house_swipe .select_img_video>div{
    border-radius: 5px;
  }
  .house_swipe .select_img_video > div:nth-child(1) {
    padding: 1px 15px;
    background-color: #ffffff;
    border: 1px solid #eee;

    margin-right: 20px;
    color: #999;
  }

  .house_swipe .select_img_video > div:nth-child(2) {
    padding: 1px 15px;
    background-color: #ffffff;
    border: 1px solid #eee;
    margin-right: 20px;
    color: #999;

  }

  .house_swipe .select_img_video > div:nth-child(3) {
    padding: 1px 15px;
    background-color: #000000;
    color: #ffffff;
    position: absolute;
    right: 10px;
    opacity: 0.5;
  }

  .red {
    background-color: #e6191e !important;
    color: #ffffff !important;
    border: 1px solid #e6191e !important;
  }
</style>
